<template>
  <div class="classify-right clearfix">
    <ul>
      <li class="fl" v-for="(item,index) in list" :key="index">
        <img :src="item.src" alt />
        <p v-text="item.title"></p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    async classifydata(text) {
      let { data } = await this.$axios.get(
        `http://localhost:3000/fenglei?text=${text}`
      );
      this.list = data;
      window.console.log(this.list);
    }
  },
  created() {
    this.classifydata("鲜花用途");
  }
};
</script>
<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}
.classify-right {
  padding: vw(10);
  ul {
    height: vw(580);
    overflow: auto;
    li {
      width: vw(80);
      height: vw(124.8);
      margin-right: vw(5);
      img {
        width: vw(80);
        border-radius: vw(4);
      }
      p {
        font-size: vw(12);
        height: vw(24);
        line-height: vw(24);
        text-align: center;
      }
    }
  }
}
</style>